<template>
  <el-container>
    <el-main class="app-body">
      <div class="profile-container">
      <var-paper :elevation="2" class="action-group">
          <var-table>
              <thead>
              <tr>
                  <router-link to="/my/profile2">
                      <var-cell icon="chevron-left" title="Back" >
                      </var-cell>
                  </router-link>
              </tr>
              <tr>
                  <th>Name</th>
                  <th>Booking Time</th>
                  <th>Price</th>
              </tr>
              </thead>
              <tbody>
                <tr v-for="item in order_list" :key="item" style="font-size: 10px;" @click="showBook(item)">
                  <td >{{ item.order_name }} </td>
                  <td >{{ item.service_time+' '+item.detail_time }}</td>
                  <td >{{ '$'+ item.price }}</td>
                </tr>
              </tbody>
          </var-table>
          <var-skeleton
            title
            :rows="3"
            :loading="loading"
            v-for="index in 6"
            :key="index"
          >
          </var-skeleton>
          <var-popup v-model:show="show">
            <var-cell>
              UserName:   {{ showList.userName }}
            </var-cell>
            <var-cell>Position:   {{'\t'+showList.orderName }}</var-cell>
            <var-cell>OrderId:    {{ '\t'+showList.orderId }} </var-cell>
            <var-cell>Time:   {{ '\t'+showList.orderTime }}</var-cell>
            <var-cell>Price:   {{ '\t'+'$'+ showList.price }}</var-cell>
            <var-cell><var-button block type="danger" @click="deleteDialog(showList.id,showList.price)">Delete</var-button></var-cell>
          </var-popup>
      </var-paper>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import { useUserStore } from '@/stores/user';
import { getToken, setToken } from '@/utils/auth';
//0 ：成功 1：Orders made earlier than today cannot be cancelled!
const userStore = useUserStore();
export default {
    name:'booking',
    data(){
        return{
            order_list:[],
            loading:true,
        }
    },
    created(){
        axios
            .get('https://fitzone.work:8080/orderAll')
            .then(res =>{
            this.loading = false
            console.log(res.data);
            this.order_list = res.data;
            console.log(res.data)
            this.order_list = this.order_list.filter(item=>item.user_name == userStore.nickName);
            console.log(userStore.nickName)
            console.log(this.order_list[0])
            })
            .catch(err =>{
            console.error(err);
            })
    }
}
</script>
<script setup>
import { ref, computed, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NavBar, Tabbar, TabbarItem } from "vant";
import { useSettingStore } from "@/stores/setting";
import NavBarConfig from '@/router/navbar.config'
import {ElContainer,ElHeader,ElMain,ElFooter} from 'element-plus' 
import { Snackbar } from '@varlet/ui'
import { StyleProvider, Themes } from '@varlet/ui';
import axios from 'axios';
StyleProvider(Themes.dark)

let userdata = []
const show = ref(false);
const message = {
  text:'',
}
const showList = reactive({
  id:Number,
  userName:'',
  orderName:'',
  orderId:'',
  orderTime:'',
  price:'',
})
const route = useRoute();
const router = useRouter();
const settingStore = useSettingStore();
function deleteDialog(id,price){
  console.log(id)
  axios({
      method:'get',
      baseURL: 'https://fitzone.work:8080/delete_order_by_user',
      params:{
        id:id
      }
    }).then(res =>{
      show.value = true
      console.log(res.data)
      if(res.data == 0){
        Snackbar.success('Booking was changed successfully!')
        show.value = false 
        axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/recharge',
        params:{
            id:userStore.userId,
            money:0
        }
      }).then(res=>{
        useUserStore().permissions[1]=res.data
        userdata=getToken()
        userdata.balance=res.data
        setToken(userdata)
        resolve()
      })
        // location.reload()
      }
      else{
        show.value = false
        Snackbar.error('The reservation has expired. Please connact administrators!')
      }
    }).catch(err =>{
      show.value = true
      console.log(err)
      message.text = 'Error!'
    }) 
}
function showBook(item){
  show.value = true
  showList.id = item.id
  showList.userName = item.user_name
  showList.orderId = item.order_id
  showList.orderName = item.order_name
  showList.orderTime = item.order_time
  showList.price = item.price
}
</script>
<style>
.footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 50px;
  z-index: 9999;
}
</style>
